<div class="subheader editor-toolbar" id="editor-header">
  <div class="fixed-container">
    <div class="btn-group">
      <div class="btn-toolbar pull-left" ng-controller="AppDefinitionToolbarController" ng-cloak>
        <button
          id="{{ item.id }}"
          title="{{ item.title | translate }}"
          ng-repeat="item in items"
          ng-switch
          on="item.type"
          class="btn btn-inverse"
          ng-class="{'separator': item.type == 'separator'}"
          ng-disabled="item.type == 'separator' || item.enabled == false"
          ng-click="toolbarButtonClicked($index)"
        >
          <i
            ng-switch-when="button"
            ng-class="item.cssClass"
            class="toolbar-button"
            data-toggle="tooltip"
            title="{{ item.title | translate }}"
          ></i>
          <div ng-switch-when="separator" ng-class="item.cssClass"></div>
        </button>
      </div>
    </div>
    <div class="btn-group pull-right" ng-show="!secondaryItems.length">
      <div class="btn-toolbar pull-right" ng-controller="AppDefinitionToolbarController">
        <button
          title="{{ item.title | translate }}"
          ng-repeat="item in secondaryItems"
          ng-switch
          on="item.type"
          class="btn btn-inverse"
          ng-class="{'separator': item.type == 'separator'}"
          ng-disabled="item.type == 'separator'"
          ng-click="toolbarSecondaryButtonClicked($index)"
          id="{{ item.id }}"
        >
          <i
            ng-switch-when="button"
            ng-class="item.cssClass"
            class="toolbar-button"
            data-toggle="tooltip"
            title="{{ item.title | translate }}"
          ></i>
          <div ng-switch-when="separator" ng-class="item.cssClass"></div>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid content" ng-if="currentAppDefinition" auto-height offset="40">
  <h2>{{ 'APP.DETAILS.TITLE' | translate: currentAppDefinition }}</h2>
  <div class="content-canvas-wrapper">
    <div class="content-canvas">
      <div class="row">
        <div class="col-xs-4">
          <div class="preview-wrapper active">
            <h3>{{ 'APP.TITLE.PREVIEW' | translate }}</h3>
            <div class="app preview {{ currentAppDefinition.definition.theme }}">
              <div class="app-content">
                <h3>{{ currentAppDefinition.name }}</h3>
                <p>{{ currentAppDefinition.description }}</p>
              </div>
              <div class="backdrop">
                <i ng-show="!currentAppDefinition.definition.icon" class="icon icon-choice"></i>
                <i
                  ng-show="currentAppDefinition.definition.icon"
                  class="glyphicon {{ currentAppDefinition.definition.icon }}"
                ></i>
              </div>
              <div class="logo">
                <i ng-show="!currentAppDefinition.definition.icon" class="icon icon-choice"></i>
                <i
                  ng-show="currentAppDefinition.definition.icon"
                  class="glyphicon {{ currentAppDefinition.definition.icon }}"
                ></i>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xs-8">
          <div class="form-group">
            <label>{{ 'APP.ICON' | translate }}</label>
            <div id="toggle-icon-select" class="selection" ng-click="changeIcon($event)">
              <i class="glyphicon {{ currentAppDefinition.definition.icon }}"></i>
              {{ 'APP.ACTION.SELECT-ICON' | translate }} <i class="icon icon-caret-down"></i>
            </div>
          </div>
        </div>
        <div class="col-xs-8">
          <div class="form-group">
            <label>{{ 'APP.THEME' | translate }}</label>
            <div id="toggle-theme-select" class="selection" ng-click="changeTheme($event)">
              <span class="app app-swatch {{ currentAppDefinition.definition.theme }}"></span>
              {{ 'APP.ACTION.SELECT-THEME' | translate }} <i class="icon icon-caret-down"></i>
            </div>
          </div>
        </div>
        <div class="col-xs-8">
          <div class="form-group">
            <label for="groupAccessApp">{{ 'APP.GROUPS-ACCESS' | translate }}</label>
            <input
              ng-disabled="model.loading"
              type="text"
              class="form-control"
              id="groupAccessApp"
              ng-model="currentAppDefinition.definition.groupsAccess"
              custom-keys
              enter-pressed="changeGroups($event)"
            />
          </div>
        </div>
        <div class="col-xs-8">
          <div class="form-group">
            <label for="userAccessApp">{{ 'APP.USERS-ACCESS' | translate }}</label>
            <input
              ng-disabled="model.loading"
              type="text"
              class="form-control"
              id="userAccessApp"
              ng-model="currentAppDefinition.definition.usersAccess"
              custom-keys
              enter-pressed="changeUsers($event)"
            />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12">
          <h3>{{ 'APP.DETAILS.MODELS-TITLE' | translate }}</h3>
          <div class="btn-group">
            <button
              id="toggle-included-models"
              class="btn btn-default"
              ng-click="editIncludedModels($event)"
              class="stencil-info-edit-properties"
            >
              {{ 'APP.ACTION.EDIT-MODELS' | translate }}
            </button>
          </div>
          <div
            class="no-results"
            ng-show="!currentAppDefinition.definition.models.length && !currentAppDefinition.definition.cmmnModels.length"
          >
            {{ 'APP.DETAILS.NO-MODELS-SELECTED' | translate }}
          </div>
        </div>
      </div>

      <br />

      <div class="row">
        <div class="tabs-wrapper">
          <div tab-control="tabs" active-tab="appBuilder.activeTab"></div>

          <div class="col-xs-12 item-wrapper" ng-show="appBuilder.activeTab == 'bpmn'">
            <div class="item fadein" ng-repeat="model in currentAppDefinition.definition.models">
              <div class="item-box" ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(model.id) + '\')'}">
                <div class="actions">
                  <span class="badge">v{{ model.version }}</span>
                </div>
                <div class="details">
                  <h3 class="truncate" title="{{ model.name }}">
                    {{ model.name }}
                  </h3>
                  <p>{{ model.description }}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="col-xs-12 item-wrapper" ng-show="appBuilder.activeTab == 'cmmn'">
            <div class="item fadein" ng-repeat="model in currentAppDefinition.definition.cmmnModels">
              <div class="item-box" ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(model.id) + '\')'}">
                <div class="actions">
                  <span class="badge">v{{ model.version }}</span>
                </div>
                <div class="details">
                  <h3 class="truncate" title="{{ model.name }}">
                    {{ model.name }}
                  </h3>
                  <p>{{ model.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
